<template>
    <div class="authentication" ref="authentication">
      <!--picker 学历-->
      <mt-popup position="bottom" v-model="educationShow">
        <mt-picker :slots="_eduArray" :visible-item-count="5"  valueKey="value" @change="_eduChange"></mt-picker>
        <button class="cancel" @click="educationShow=false">确定</button>
      </mt-popup>       
      <!--picker 婚姻-->
      <mt-popup position="bottom" v-model="marriageShow">
        <mt-picker :slots="_marArray" :visible-item-count="3"  valueKey="value" @change="_marChange"></mt-picker>
        <button class="cancel" @click="marriageShow=false">确定</button>
      </mt-popup>
      <!--picker 子女情况-->
      <mt-popup position="bottom" v-model="childShow">
        <mt-picker :slots="_childArray" :visible-item-count="5"  valueKey="value" @change="_childChange"></mt-picker>
        <button class="cancel" @click="childShow=false">确定</button>
      </mt-popup>
      <!--picker 居住时长-->
      <mt-popup position="bottom" v-model="liveShow">
        <mt-picker :slots="_liveArray" :visible-item-count="5"  valueKey="value" @change="_liveChange"></mt-picker>
        <button class="cancel" @click="liveShow=false">确定</button>
      </mt-popup>
      <prog :step="0"></prog>
      <div class="block">
        <ul class="item-box">
          <li class="item">
            <div class="left">真实姓名<span class="red"> *</span></div>
            <div class="right">
              <input type="text" class="from-data" placeholder="请输入姓名" v-model="name">
            </div>
          </li>
          <li class="item">
            <div class="left">身份证号<span class="red"> *</span></div>
            <div class="right">
              <input type="text" class="from-data" placeholder="请输入身份证号" v-model="idCard">
            </div>
          </li>
          <li class="item">
            <div class="left">手机号<span class="red"> *</span></div>
            <div class="right">
              <input type="text" class="from-data" placeholder="请输入手机号" v-model="phone">
            </div>
          </li>
          <li class="item">
            <div class="left">电子邮箱<span class="red"> *</span></div>
            <div class="right">
              <input type="text" class="from-data" placeholder="请输入邮箱" v-model="mail">
            </div>
          </li>
          <li class="item">
            <div class="left">QQ<span class="red"> *</span></div>
            <div class="right">
              <input type="text" class="from-data" placeholder="请输入QQ号" v-model="qqNum">
            </div>
          </li>
        </ul>
      </div>
      <div class="block">
        <ul class="item-box">
          <li class="item" @click="educationShow = true">
            <div class="left">教育水平<span class="red"> *</span></div>
            <div class="right">
              <div class="content" style="font-size: 14px">{{checkedEdu[0].value}}</div>
            </div>
          </li>
          <li class="item" @click="marriageShow = true">
            <div class="left">婚姻状况<span class="red"> *</span></div>
            <div class="right">
              <div class="content" style="font-size: 14px">{{checkedMar[0].value}}</div>
            </div>
          </li>
          <li class="item" @click="childShow = true">
            <div class="left">子女情况<span class="red"> *</span></div>
            <div class="right">
              <div class="content" style="font-size: 14px">{{checkedChild[0].value}}</div>
            </div>
          </li>
          <li class="item">
            <div class="left">家庭住址<span class="red"> *</span></div>
            <div class="right">
              <input type="text" class="from-data" placeholder="请输入家庭住址" v-model="address">
            </div>
          </li>
          <li class="item" @click="liveShow = true">
            <div class="left">居住时长<span class="red"> *</span></div>
            <div class="right">
              <div class="content" style="font-size: 14px">{{checkedLive[0].value}}</div>
            </div>
          </li>
        </ul>
      </div>
      <button class="next" @click="_next">下一步</button>
    </div>
</template>

<script>
  import prog from '../../components/progress/prog'
  import pickerBottom from "../../components/pickerBottom/pickerBottom";
  import global from '../../common/global/global'
  import axios from 'axios'
  import {getStorage} from "../../common/js/localStorage";
  import {Toast} from 'mint-ui'
  import {isPhoneNum} from "../../common/js/filter";
  import {isIdCard} from "../../common/js/filter";
  import {isMail} from "../../common/js/filter";
  import {isQQ} from "../../common/js/filter";

  export default {
        name: "authentication",
        components:{
          'prog':prog,
          'pickerBottom':pickerBottom
        },
        created(){
          for (let i=1;i<5;i++){
            this._getListMsg(i)
          }
        },
        data(){
          return{
            liveShow:false,     //居住时长显示
            childShow:false,    //子女信息显示
            marriageShow:false, //婚姻状况显示
            educationShow:false,//文化程度显示
            name:'',      //名字
            idCard:'',    //身份证号
            phone:'',     //电话
            mail:'',      //邮箱
            qqNum:'',     //QQ号
            education:'', //教育水平
            marriage:'',  //婚姻状况
            child:'',     //子女情况
            address:'',   //居住地址
            liveTime:'',  //居住时长
            liveArray:[],             //居住时长列表
            checkedLive:[{value:''}], //居住时长选中
            childArray:[],            //子女情况列表
            checkedChild:[{value:''}],//子女情况选中
            marArray:[],              //婚姻状况列表
            checkedMar:[{value:''}],  //婚姻状况显示
            eduArray:[],              //文化程度列表
            checkedEdu:[{value:''}],  //文化程度显示

          }
        },
        methods:{
           /*@events
            * 居住时长change
            */
          _liveChange(dom,val){
            if(val[0]===undefined){
              return
            }
            this.checkedLive = val
          },
           /*@events
            * 子女情况change
            */
          _childChange(dom,val){
            if(val[0]===undefined){
              return
            }
            this.checkedChild = val
          },
           /*@events
            * 婚姻状况change
            */
          _marChange(dom,val){
            if(val[0]===undefined){
              return
            }
            this.checkedMar = val
          },
           /*@events
            * 文化程度change
            */
          _eduChange(dom,val){
            if(val[0]===undefined){
              return
            }
            this.checkedEdu = val
          },
          //获取列表信息
          _getListMsg(count){
            axios({
              method:'get',
              url:global.$host+'/api/app/dictionary/getOptions',
              params:{
                type:count,
                token:getStorage('token')
              }
            }).then(res=>{
              if(res.status===global.ERR_OK){
                if(res.data.status===global.CUSTOM_ERR_OK){
                  switch (count) {
                    case 1:
                      this.eduArray = res.data.data
                      this.checkedEdu[0] = res.data.data[0]
                          break
                    case 2:
                      this.marArray = res.data.data
                      this.checkedMar[0] = res.data.data[0]
                          break
                    case 3:
                      this.childArray = res.data.data
                      this.checkedChild[0] = res.data.data[0]
                          break
                    case 4:
                      this.liveArray = res.data.data
                      this.checkedLive[0] = res.data.data[0]
                  }
                }
              }
            })
          },
          //下一步
          _next(){
            //正则判断数据是否非法
            if(this.name.length===0){
              Toast({
                message: '姓名不能为空',
              });
              return
            }
            if(!isIdCard(this.idCard)){
              Toast({
                message: '身份证号码格式错误',
              });
              return
            }
            if(!isPhoneNum(this.phone)){
              Toast({
                message: '手机号格式错误',
              });
              return
            }
            if(!isMail(this.mail)){
              Toast({
                message: '邮箱格式错误',
              });
              return
            }
            if(!isQQ(this.qqNum)){
              Toast({
                message: 'QQ格式错误',
              });
              return
            }
            if(this.address.length===0){
              Toast({
                message: '地址不能为空',
              });
              return
            }
            axios({
              method:'post',
              url:global.$host+'/api/app/person/addUserInfo',
              params:{
                name:this.name,
                cardNum:this.idCard,
                email:this.mail,
                qqNum:this.qqNum,
                phone:this.phone,
                educateLevel:this.checkedEdu[0].key,
                marital:this.checkedMar[0].key,
                child:this.checkedChild[0].key,
                address:this.address,
                liveTime:this.checkedLive[0].key,
                token:getStorage('token')
              }
            }).then(res=>{
              if(res.status===global.ERR_OK){
                if(res.data.status===global.CUSTOM_ERR_OK){

                }
              }
            })
          },
        },
        computed:{
          _eduArray(){
            let slots=[
              {
                flex: 1,
                values: this.eduArray,
                className: 'slot1',
                textAlign: 'right'
              }
            ]
            return slots
          },
          _marArray(){
            let slots=[
              {
                flex: 1,
                values: this.marArray,
                className: 'slot1',
                textAlign: 'right'
              }
            ]
            return slots
          },
          _childArray(){
            let slots=[
              {
                flex: 1,
                values: this.childArray,
                className: 'slot1',
                textAlign: 'right'
              }
            ]
            return slots
          },
          _liveArray(){
            let slots=[
              {
                flex: 1,
                values: this.liveArray,
                className: 'slot1',
                textAlign: 'right'
              }
            ]
            return slots
          }
        }
    }
</script>

<style scoped lang="stylus">
  .authentication
    height calc(100% - 58px)
    background #f4f4f4
    text-align center
    padding-top 14px
    overflow auto
    .block
      margin 10px 10px 0 10px
      background #ffffff
      border-radius 6px
      box-shadow -2px 2px 5px rgba(160,160,160,.1)
      .item-box
        .item
          display flex
          height 44px
          line-height 44px
          border-bottom 1px solid #eeeeee
          &:last-child
            border-bottom none
           .left
              flex 0 0 80px
              text-align left
              padding-left 15px
              color #4B4B4B
             .red
              position relative
              top 3px
              color #E7332E
           .right
            flex 0 0 calc(100% - 95px)
            font-size 0
            .content
              background url("icon_arrow_right.svg")no-repeat calc(100% - 15px) center
              text-align right
              padding-right 35px
              font-size 16px
              color #919191
            .from-data
              width calc(100% - 15px)
              height 100%
              text-align right
              outline none
              font-size 14px
              padding-right 15px
              color #919191


    .next
      width calc(100% - 20px)
      margin-top 21px
      background #49A2FE
      height 44px
      color #ffffff
      font-size 17px
      border none
      outline none
      margin-bottom 21px
      border-radius 6px
  .cancel
    width 100%
    height 44px
    font-size 17px
    background #49A2FE
    color #ffffff
    border none
    outline none
</style>
